<template>
	<view class="page-container bg-grey" v-if="tgySetting?.tgy_reg_enabled">
		<up-navbar safeAreaInsetTop fixed bgColor="transparent" :autoBack="true"></up-navbar>
		<image :src="imgBaseUrl + 'group-banner.png'" class="group-banner" />
		<view class="pb-fixed-bottom plr-24">
			<view class="form-group zjy-card-form">
				<view class="zjy-card-title label">填写申请信息</view>
				<zjy-form-item title="姓名" type="input" v-model:value="name" />
				<zjy-form-item title="手机号" type="input" v-model:value="mobile" />
				<zjy-form-item title="验证码">
					<template #value>
						<view class="flex-a">
							<up-input
								type="text"
								border="none"
								inputAlign="right"
								placeholderStyle="color: #C9CDD4"
								fontSize="28rpx"
								placeholder="请输入"
							/>
							<view class="verify-code">
								<view v-if="!verificationCode.seconds" @click="getCode">获取验证码</view>
								<view class="c-black-_2" v-else>
									重新发送
									<text class="ml-10">{{ verificationCode.seconds }}</text>
									s
								</view>
							</view>
						</view>
					</template>
				</zjy-form-item>
				<zjy-form-item title="身份证号" pb="0" :noBorder="true" type="input" v-model:value="idNumber" />
				<!--  动态表单后续再做
				<zjy-form-item title="您的职业" type="select" value="" />
				<zjy-form-item title="身份证照片" pb="0" :noBorder="true">
					<template #value>
						<view class="flex-j-end">
							<zjy-upload v-model="groupAvatar" :maxCount="1" :maxSize="20 * 1024 * 1024">
								<view class="flex">
									<image :src="imgBaseUrl + 'upload-img.png'" class="icon-64" />
								</view>
							</zjy-upload>
						</view>
					</template>
				</zjy-form-item> -->
			</view>
			<view class="zjy-card-form mt-24 mb-48">
				<view class="zjy-card-title label">推广说明</view>
				<view class="mt-32">
					<view class="fs-28">1.成为推广员</view>
					<view class="mt-16 ml-18 c-grey-86">注册申请成为推广员</view>
				</view>
				<view class="mt-32">
					<view class="fs-28">2.分享商品，获得佣金</view>
					<view class="mt-16 ml-18 c-grey-86">
						用户用过您分享的推广产品链接或扫描您的推广码下单并完成消费，您将获得佣金奖励
					</view>
				</view>
				<view class="mt-32">
					<view class="fs-28">3.随时提现</view>
					<view class="mt-16 ml-18 c-grey-86">满足提现门槛即可随时发起佣金提现</view>
				</view>
			</view>
		</view>
		<view class="bottom-fixed-wrap">
			<view class="flex-1">
				<zjy-button :disabled="!name || !mobile || !idNumber" @click="submitApply">申请成为推广员</zjy-button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { $tgyApply, $tgySetting } from "@/api/promotion"
import { navigateTo } from "@/utils/page-redirect"
import { verificationCode } from "@/utils/verification-code-timer"
import { onLoad, onUnload } from "@dcloudio/uni-app"

const imgBaseUrl = inject("imgBaseUrl")

const name = ref("")
const mobile = ref("")
const idNumber = ref("")
const tgySetting = ref()
const getCode = () => {
	verificationCode.start(60)
}
const submitApply = () => {
	$tgyApply({
		data: JSON.stringify({
			name: name.value.trim(),
			mobile: mobile.value.trim(),
			idNumber: idNumber.value.trim(),
		}),
	}).then((_) => {
		navigateTo("/pages/common/res", { type: "tgyApplication-submit" })
	})
}
onLoad(async () => {
	tgySetting.value = await $tgySetting()
	if (!tgySetting.value.tgy_reg_enabled) {
		uni.redirectTo({
			url: "/pages/common/res?type=tgyApplication-close",
		})
	}
})
onUnload(() => {
	verificationCode?.clear()
})
</script>
<style lang="scss" scoped>
.group-banner {
	width: 100%;
	height: 872rpx;
}
.form-group {
	position: relative;
	margin-top: -120rpx;
	background: linear-gradient(0deg, $c-white 74%, rgba(255, 255, 255, 0.8) 100%);
	border-radius: 16rpx;
	border: 4rpx solid $c-white;
	backdrop-filter: blur(30px);
}
.verify-code {
	color: $brown-bc;
	margin-left: 36rpx;
	position: relative;
	&::before {
		content: "";
		position: absolute;
		left: -18rpx;
		top: 4rpx;
		bottom: 4rpx;
		width: 2rpx;
		background: #c9cdd4;
	}
}
</style>
